<template>
  <div>
    <h2>子组件获取到的vuex-user-state数据：{{ userInfo }}</h2>
    <h2>子组件获取到的vuex-user-getter数据：{{ userName }}--{{ userAge }}</h2>
    <button @click="handleMutation">触发mutation</button>
    <button @click="handleAction">触发handleAction</button>
  </div>
</template>
<script>
import { mapState,mapGetters } from "vuex";
// import { createNamespacedHelpers  } from "vuex" // createNamespacedHelpers 创建命名空间助手
// const { mapState }  = createNamespacedHelpers("user")
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("user", ["userInfo"]),
    ...mapGetters("user", ["userName","userAge"]),
    // ...mapState(['userInfo']),
  },
  methods: {
    handleMutation() {
      this.$store.commit("user/GFT_USER", {
        name: "张三",
        age: Math.floor(Math.random() * 100) + 1,
      });
    },
    handleAction() {
      this.$store.dispatch("user/setUserInfo", {
        name: "张三枫",
        age: Math.floor(Math.random() * 100) + 1,
      });
    },
  },
};
</script>
